
<template>
    <el-upload class="avatar-uploader" action="" v-model="Addfrom.url" :show-file-list="false" :http-request="uploadURL"
    :multiple="true" :before-upload="handleBeforeUpload" >
       <el-button size="small" icon="el-icon-plus avatar-uploader-icon" :type="type">{{text}}</el-button>
    </el-upload>
</template>
<script>
  import {client,	getFileNameUUID} from './alioss.js'
  export default {
    props:['text','type'],
    data() {
      return {
        fileList: [],
        Addfrom:{
          url:''
        }
      };
    },
    methods: {
      // 上传文件之前
			handleBeforeUpload(file) {
				const isJPEG = file.name.split('.')[1] === 'jpeg';
				const isJPG = file.name.split('.')[1] === 'jpg';
				const isPNG = file.name.split('.')[1] === 'png';
				const isWEBP = file.name.split('.')[1] === 'webp';
				const isGIF = file.name.split('.')[1] === 'gif';
				const isLt500K = file.size / 1024 / 1024 < 10;
				if (!isJPG && !isJPEG && !isPNG && !isWEBP && !isGIF) {
					this.$message.error('上传图片只能是 JPEG/JPG/PNG 格式!');
				}
				if (!isLt500K) {
					this.$message.error('单张图片大小不能超过 10mb!');
				}
				return (isJPEG || isJPG || isPNG || isWEBP || isGIF) && isLt500K;
			},
			uploadURL(file) {
        console.log(file)
				//注意哦，这里指定文件夹'image/'，尝试过写在配置文件，但是各种不行，写在这里就可以
        
				var fileName = 'image/'+this.$route.query.id+'_'+file.file.name;
				//定义唯一的文件名，打印出来的uid其实就是时间戳
				client().multipartUpload(fileName, file.file,{
                progress: function(percentage, cpt) {
                  console.log('打印进度',percentage)
                }
              }).then((res)=>{
                console.log(res,'上传成功')
          //此处赋值，是相当于上传成功之后，手动拼接服务器地址和文件名
         let url='https://ejarwebtools.oss-cn-hangzhou.aliyuncs.com/' + res.name;
         this.$emit("confrim",url)
         return
        })
			},

    }
  }
</script>
